﻿<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <meta name="keywords" content="AngularJS Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
    <meta name="description" content="AngularJS Menu example. This example demonstrates a Vertical Menu built with Angular." /> 
    <title id='Description'>The jqxMenu widget supports several built-in modes - horizontal, vertical and context menu. In this demo, the mode property is set to 'vertical'.
    </title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script> 
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-menu jqx-mode="'vertical'" jqx-width="120">
        <ul>
            <li><a href="../#">Home</a></li>
            <li>About Us
                <ul>
                    <li><a href="../#">History</a></li>
                    <li><a href="../#">Our Vision</a></li>
                    <li><a href="../#">The Team</a>
                        <ul>
                            <li><a href="../#">Brigita</a></li>
                            <li><a href="../#">John</a></li>
                            <li><a href="../#">Michael</a></li>
                            <li><a href="../#">Peter</a></li>
                            <li><a href="../#">Sarah</a></li>
                        </ul>
                    </li>
                    <li><a href="../#">Clients</a></li>
                    <li><a href="../#">Testimonials</a></li>
                    <li><a href="../#">Press</a></li>
                    <li><a href="../#">FAQs</a></li>
                </ul>
            </li>
            <li>Services
                <ul>
                    <li><a href="../#">Product Development</a></li>
                    <li><a href="../#">Delivery</a></li>
                    <li><a href="../#">Shop Online</a></li>
                    <li><a href="../#">Support</a></li>
                    <li><a href="../#">Training &amp; Consulting</a></li>
                </ul>
            </li>
            <li>Products
                <ul>
                    <li><a href="../#">New</a>
                        <ul>
                            <li><a href="../#">Corporate Use</a></li>
                            <li><a href="../#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="../#">Used</a>
                        <ul>
                            <li><a href="../#">Corporate Use</a></li>
                            <li><a href="../#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="../#">Featured</a></li>
                    <li><a href="../#">Top Rated</a></li>
                    <li><a href="../#">Prices</a></li>
                </ul>
            </li>
            <li><a href="../#">Gallery</a></li>
            <li><a href="../#">Events</a></li>
            <li><a href="../#">Careers</a></li>
            <li><a href="../#">Contact Us</a>
                <ul>
                    <li><a href="../#">Enquiry Form</a></li>
                    <li><a href="../#">Map &amp; Driving Directions</a></li>
                    <li><a href="../#">Your Feedback</a></li>
                </ul>
            </li>
        </ul>
    </jqx-menu>
</body>
</html>
